<template>
  <div class="home">
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <input type="checkbox" v-model="item.flag" />
        {{ item.name }} -- {{ item.price }}
      </li>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "HomeView",
  components: {},
  data() {
    return {
      list: [
        { name: "猫粮", price: 200 },
        { name: "狗粮", price: 200 },
        { name: "猪粮", price: 200 },
      ],
      num: 10,
    };
  },
  created() {
    setTimeout(() => {
      // this.list[2].flag = true;
      // this.$set 第一个参数既可以是个对象，又可以是个数组 （当时数组的时候第二个参数是索引，当对象时，第二个参数是属性名）
      this.$set(this.list[1], "flag", true);
    }, 2000);

    setTimeout(() => {
      this.list[1].flag = false;
    }, 5000);
  },
  watch: {
    num() {},
  },
};

// defineReactive()
// ob.dep.notify()
</script>
